
import React, { useState } from 'react';
import { Tabs, List, Card, Button, Tag, Modal, Radio, Input, message } from 'antd';
import {
  FooterToolbar,
  ModalForm,
  PageContainer,
  ProDescriptions,
  ProFormText,
  ProFormTextArea,
  ProTable,
} from '@ant-design/pro-components';
const mockData = [
  {
    id: 1,
    type: '直接入库',
    status: '待入库审核',
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm，共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    phone: '134xxxxxxxx',
    canAudit: true,
    canUrge: false,
    canReason: false,
    canStock: false,
    maxStock: 30,
  },
  {
    id: 2,
    type: '定向申请采购',
    status: '待入库审核',
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm，共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    phone: '134xxxxxxxx',
    canAudit: true,
    canUrge: false,
    canReason: false,
    canStock: false,
    maxStock: 30,
  },
  {
    id: 3,
    type: '定向申请采购',
    status: '待签收',
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm，共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    phone: '134xxxxxxxx',
    canAudit: false,
    canUrge: true,
    canReason: false,
    canStock: false,
    maxStock: 30,
  },
  {
    id: 4,
    type: '定向申请采购',
    status: '已完成',
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm，共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    phone: '134xxxxxxxx',
    canAudit: false,
    canUrge: false,
    canReason: false,
    canStock: true,
    maxStock: 30,
  },
  {
    id: 5,
    type: '直接入库',
    status: '已驳回',
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm，共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    phone: '134xxxxxxxx',
    canAudit: false,
    canUrge: false,
    canReason: true,
    canStock: false,
    maxStock: 30,
  },
];

const statusTabs = [
  { key: 'all', label: '全部' },
  { key: 'wait', label: '待审核' },
  { key: 'sign', label: '待签收' },
  { key: 'done', label: '已完成' },
  { key: 'reject', label: '已驳回' },
];

const statusTag = (status: string) => {
  switch (status) {
    case '待入库审核':
      return <Tag color="orange">待入库审核</Tag>;
    case '待签收':
      return <Tag color="gold">待签收</Tag>;
    case '已完成':
      return <Tag color="green">已完成</Tag>;
    case '已驳回':
      return <Tag color="red">已驳回</Tag>;
    default:
      return <Tag>{status}</Tag>;
  }
};

const PCStockBatch: React.FC = () => {
  const [tab, setTab] = useState('all');
  const [auditVisible, setAuditVisible] = useState(false);
  const [urgeVisible, setUrgeVisible] = useState(false);
  const [reasonVisible, setReasonVisible] = useState(false);
  const [current, setCurrent] = useState<any>(null);
  const [assetType, setAssetType] = useState('易耗品');
  const [shelf, setShelf] = useState('上架');
  const [stockNum, setStockNum] = useState('');

  const handleAudit = (item: any) => {
    setCurrent(item);
    setAuditVisible(true);
    setAssetType('易耗品');
    setShelf('上架');
    setStockNum('');
  };
  const handleUrge = (item: any) => {
    setCurrent(item);
    setUrgeVisible(true);
  };
  const handleReason = (item: any) => {
    setCurrent(item);
    setReasonVisible(true);
  };

  const handleAuditSubmit = () => {
    if (!stockNum) {
      message.warning('请输入上架数量');
      return;
    }
    setAuditVisible(false);
    message.success('提交成功');
  };

  const filtered = tab === 'all' ? mockData : mockData.filter(i => {
    if (tab === 'wait') return i.status === '待入库审核';
    if (tab === 'sign') return i.status === '待签收';
    if (tab === 'done') return i.status === '已完成';
    if (tab === 'reject') return i.status === '已驳回';
    return true;
  });

  return (
    <PageContainer>
      <Tabs
        activeKey={tab}
        onChange={setTab}
        items={statusTabs.map(t => ({ key: t.key, label: t.label }))}
      />
      <List
        dataSource={filtered}
        renderItem={item => (
          <Card
            style={{ marginBottom: 16 }}
            bodyStyle={{ padding: 16 }}
            key={item.id}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontWeight: 500 }}>采购类型：{item.type}</div>
                <div style={{ color: '#888', fontSize: 12 }}>{item.desc}</div>
                <div style={{ margin: '8px 0', fontWeight: 500 }}>￥{item.price}元</div>
                <div style={{ color: '#888', fontSize: 12 }}>采购申请人：{item.applicant}</div>
                <div style={{ color: '#888', fontSize: 12 }}>采购时间：{item.time}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                {statusTag(item.status)}
                {item.canAudit && (
                  <Button type="primary" size="small" style={{ marginTop: 8 }} onClick={() => handleAudit(item)}>
                    去审核
                  </Button>
                )}
                {item.canUrge && (
                  <Button type="primary" size="small" style={{ marginTop: 8 }} onClick={() => handleUrge(item)}>
                    催签收
                  </Button>
                )}
                {item.canStock && (
                  <Button type="primary" size="small" style={{ marginTop: 8 }}>
                    下载入库单
                  </Button>
                )}
                {item.canReason && (
                  <Button type="primary" size="small" style={{ marginTop: 8 }} onClick={() => handleReason(item)}>
                    查看原因
                  </Button>
                )}
              </div>
            </div>
          </Card>
        )}
      />

      {/* 审核弹窗 */}
      <Modal
        open={auditVisible}
        onCancel={() => setAuditVisible(false)}
        footer={null}
        centered
        destroyOnClose
      >
        {current && (
          <div style={{ padding: 8 }}>
            <div style={{ fontWeight: 500, marginBottom: 16 }}>审核</div>
            <div style={{ marginBottom: 12 }}>
              请选择资产类型：
              <Radio.Group
                value={assetType}
                onChange={e => setAssetType(e.target.value)}
                style={{ marginLeft: 8 }}
              >
                <Radio value="易耗品">易耗品</Radio>
                <Radio value="固定资产">固定资产</Radio>
              </Radio.Group>
            </div>
            <div style={{ marginBottom: 12 }}>
              请选择是否上架：
              <Radio.Group
                value={shelf}
                onChange={e => setShelf(e.target.value)}
                style={{ marginLeft: 8 }}
              >
                <Radio value="上架">上架</Radio>
                <Radio value="暂不上架">暂不上架</Radio>
              </Radio.Group>
            </div>
            <div style={{ marginBottom: 12 }}>
              请输入上架数量：最多可上架：{current.maxStock}
              <Input
                style={{ width: 200, marginLeft: 8 }}
                placeholder="请输入上架数量"
                value={stockNum}
                onChange={e => setStockNum(e.target.value)}
              />
            </div>
            <Button type="primary" onClick={handleAuditSubmit} block>提交</Button>
          </div>
        )}
      </Modal>

      {/* 催收弹窗 */}
      <Modal
        open={urgeVisible}
        onCancel={() => setUrgeVisible(false)}
        footer={null}
        centered
      >
        <div style={{ textAlign: 'center', padding: 24 }}>
          <div style={{ marginBottom: 16 }}>申领人：{current?.applicant} {current?.phone}</div>
          <Button type="primary" onClick={() => { setUrgeVisible(false); message.success('催收成功'); }}>立即拨打</Button>
        </div>
      </Modal>

      {/* 原因弹窗 */}
      <Modal
        open={reasonVisible}
        onCancel={() => setReasonVisible(false)}
        footer={null}
        centered
      >
        <div style={{ textAlign: 'center', padding: 24 }}>
          <div style={{ marginBottom: 16 }}>采购商品数量不足</div>
          <Button type="primary" onClick={() => setReasonVisible(false)}>知道了</Button>
        </div>
      </Modal>
    </PageContainer>
  );
};

export default PCStockBatch;
